<template>
    <view class="container">
        <u-navbar
           bgColor="#E0D0C8"
           leftIconSize="50rpx"
           fixed
           placeholder
           autoBack
        >
            <view slot="center" class="title"></view>
        </u-navbar>
        <view class="series-swiper">
            <view class="hot-ul">
                <view v-for="(item, k) in aggregateList" :key="k"  :class="k===swiperCurrent? 'hot-item-choice':'hot-item'"></view>
            </view>
            <hongren-swiper
                s_type="swiper3"
                :s_list="aggregateList"
                @change="handleChange"
                v-if="aggregateList.length > 0"
            ></hongren-swiper>
        </view>
        <view class="old-hot">
            <!--u-sticky
               customNavHeight="44px"
               :z-index="1"
            >
            </u-sticky-->
            <view class="hot-bg">
                <view class="title-hot"></view>
            </view>
            <block v-if="usedAggregateList.length > 0">
                <series-card
                    v-for="(item,k) in usedAggregateList"
                    :key="k"
                    :series="item"
                ></series-card>
            </block>
            <u-empty
                mode="data"
                width="400rpx"
                height="400rpx"
                icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
                class="empty"
                v-else
            >
            </u-empty>
            <u-loadmore
                height="50rpx"
                :status="loadStatus"
                v-if="total > 0"
                marginTop="20rpx"
                marginBottom="20rpx"
                fontSize="32rpx"
                iconSize="34rpx"
                line
            />
        </view>
    </view>
</template>

<script>
    import SeriesCard from "@/components/SeriesCard"
    import HongrenSwiper from "@/components/HongrenSwiper"
    import { getAggregateData, getUsedAggregateData } from "@/config/api"
    export default {
        name: "index",
        components: {
            HongrenSwiper,
            SeriesCard
        },
        data() {
            return {
                barHeight: null,
                swiperCurrent: 0,
                aggregateList: [],
                listQuery: {
                    page: 1,
                    list_rows: 10
                },
                total: 0,
                usedAggregateList: []
            }
        },
        computed: {
            loadStatus() {
                if (this.total > this.usedAggregateList.length) {
                    return "loading"
                } else {
                    return "nomore"
                }
            }
        },
        async onLoad() {
            const res = uni.getSystemInfoSync()
            var height = res.statusBarHeight
            this.barHeight = (44 + height) + "px"
            this.aggregateList = await getAggregateData()
            this.getData()
        },
        onReachBottom() {
            if (this.total > this.usedAggregateList.length) {
                this.listQuery.page += 1
                this.getData(false, true)
            }
        },
        methods: {
            async getData(first = false, more = false) {
                if (first) {
                    this.listQuery.page = 1
                }
                const res = await getUsedAggregateData(this.listQuery)
                if (more) {
                    this.usedAggregateList = [...this.usedAggregateList, ...res.items]
                } else {
                    this.usedAggregateList = res.items
                }
                //console.log(this.usedAggregateList)
                this.total = res.total
            },
            handleChange(e) {
                this.swiperCurrent = e
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .title {
            background: url("https://img.ionepin.com/8704d753e8abc4d02c27689ee335822592f3b394.png") no-repeat;
            background-size: 100% 100%;
            width: 228rpx;
            height: 36rpx;
        }
        .series-swiper {
            padding-top: 60rpx;
            background-image: linear-gradient(to bottom, #E0D0C8 5%, #FFFFFF 60%);
            .hot-ul {
                display: flex;
                margin-bottom: 30rpx;
                align-content: center;
                align-items: center;
                justify-content: center;
                .hot-item-choice {
                    width: 14rpx;
                    height: 14rpx;
                    background: #FFFFFF;
                    border-radius: 7rpx;
                    margin-right: 16rpx;
                }
                .hot-item {
                    width: 14rpx;
                    height: 14rpx;
                    background: #FFFFFF;
                    border-radius: 7rpx;
                    margin-right: 16rpx;
                    opacity: 0.5;
                }
            }
        }
        .old-hot {
            background: #F9F9F9;
            .hot-bg {
                padding-top: 60rpx;
                padding-bottom: 37rpx;
                background: #F9F9F9;
            }
            .title-hot {
                background: url("https://img.ionepin.com/812e8692f7c11d99c94c95395433caaa21d29275.png") no-repeat;
                background-size: 100% 100%;
                width: 220rpx;
                height: 34rpx;
                margin: auto;
            }
            .empty {
                padding: 50rpx 0;
            }
            padding-bottom: 1px;
        }
    }
</style>
